<!--
 * @Descripttion: 模具状态
 * @LastEditors: xzh
 * @LastEditTime: 2023-11-25 22:39:20
-->
<template>
  <el-card class="el-card-bottom-top">
    <template #header>
      <span>{{ $t(`page.moldManageArr.moldState`) }}</span>
    </template>
    <el-col :span="8" v-loading="loading">
      <!-- 模具状态图表 -->
      <DileChart
        ref="moldStateChartRef"
        border
        :chart="moldStateParam.moldStateChart"
      />
    </el-col>
    <!-- 模具状态列表 -->
    <el-col :span="6" v-loading="loading">
      <vxe-table
        :data="dataMap.moldStateArr"
        :scroll-y="{ gt: 50, enabled: true }"
        show-overflow
        show-header-overflow
        height="auto"
        border
      >
        <vxe-column
          v-for="column in AfterSaleUtils.tableColumnMap.moldState"
          :key="column.field"
          :field="column.field"
          :title="$t(column.title)"
          :width="column.width || ''"
        />
      </vxe-table>
    </el-col>
    <!-- 模具报警列表 -->
    <el-col :span="9" v-loading="loading">
      <vxe-table
        :data="dataMap.moldWarningArr"
        :scroll-y="{ gt: 50, enabled: true }"
        show-overflow
        show-header-overflow
        height="auto"
        border
      >
        <vxe-column
          v-for="column in AfterSaleUtils.tableColumnMap.moldWarning"
          :key="column.field"
          :field="column.field"
          :title="$t(column.title)"
          :width="column.width || ''"
        />
      </vxe-table>
    </el-col>
    <el-col :span="12" v-loading="loading">
      <!-- 模具故障图表 -->
      <DileChart
        ref="moldFaultChartRef"
        border
        :chart="moldStateParam.moldFaultChart"
      />
    </el-col>
    <!-- 模具故障列表 -->
    <el-col :span="11" v-loading="loading">
      <vxe-table
        :data="dataMap.moldFaultArr"
        :scroll-y="{ gt: 50, enabled: true }"
        show-overflow
        show-header-overflow
        height="auto"
        border
      >
        <vxe-column
          v-for="column in AfterSaleUtils.tableColumnMap.moldFault"
          :key="column.field"
          :field="column.field"
          :title="$t(column.title)"
          :width="column.width || ''"
        />
      </vxe-table>
    </el-col>
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive, watch, toRefs } from "vue";
import type { object_Inf } from "@/utils/typings/index.type";
import AfterSaleUtils from "../afterSale-utils";
import DileChart from "@/components/dile-chart/index.vue";
const props = defineProps({
  dataMap: {
    type: Object,
    requited: true,
    default: {},
  },
  loading: {
    type: Boolean,
    requited: true,
    default: false,
  },
});
/**
 * @Author: xzh
 * @Descripttion: 模具状态图表实例
 * @Param:
 */
let moldStateChartRef = ref<any>(null);
/**
 * @Author: xzh
 * @Descripttion: 模具故障图表实例
 * @Param:
 */
let moldFaultChartRef = ref<any>(null);
/**
 * @Author: xzh
 * @Descripttion: 模具状态
 * @Param:
 */
let moldStateParam = reactive<object_Inf>({
  //模具状态图表
  moldStateChart: {},
  //模具故障图表
  moldFaultChart: {},
});
/**
 * @Author: xzh
 * @Descripttion:监听值修改
 * @Param:
 */
watch(
  () => props.dataMap,
  () => {
    Object.keys(props.dataMap || {}).length > 0 && initMoldSate();
  }
);
/**
 * @Author: xzh
 * @Descripttion: 加载模具状态
 * @Param:
 */
let initMoldSate = () => {
  let { moldFaultArr, moldStateArr } = props.dataMap,
    { moldStateChart, moldFaultChart } = toRefs(moldStateParam);
  //获取模具状态图表数据
  moldStateChart.value = AfterSaleUtils.getMoldStateChart(moldStateArr, "52");
  //获取模具故障图表
  moldFaultChart.value = AfterSaleUtils.getMoldFaultChart(moldFaultArr);
  //渲染图表
  moldStateChartRef.value.init();
  //渲染图表
  moldFaultChartRef.value.init();
};
</script>
<style lang="scss" scoped>
:deep(.el-card__body) {
  height: max-content !important;
  flex-wrap: wrap;
  gap: 0.5rem;
  .el-col {
    height: 23rem !important;
  }
}
</style>
